<template>
	<v-content ref="content" single>
		<v-header title="登录密码" back></v-header>
		<div class="nickname">
			<div class="text">手机号:</div>
			<input v-model="formData.phone" placeholder="手机号" disabled />
		</div>
		<div class="nickname">
			<div class="text">验证码:</div>
			<input v-model="formData.smsCode" placeholder="请输入验证码" />
			<div class="send" @click="sendCode(formData.phone)">{{ veCodeText }}</div>
		</div>
		<div class="nickname">
			<div class="text">新密码:</div>
			<input v-model="formData.pwd" placeholder="请输入新密码" type="password" />
		</div>
		<div class="nickname">
			<div class="text">确认新密码:</div>
			<input v-model="password" placeholder="请再次输入新密码" type="password" />
		</div>
		<button type="primary" class="button" @click="onSubmit">确认</button>
	</v-content>
</template>
<script>
import mixins from "@/mixins"
import smsMixin from "@/mixins/vecode"
import MD5 from "js-md5"

export default {
	mixins: [
		mixins,
		smsMixin({
			url: "/api/sendCode",
			type: "3",
		}),
	],
	data() {
		return {
			formData: {
				phone: "",
				smsCode: "",
				pwd: "",
			},
			password: "",
		}
	},
	onShow() {
		this.formData.phone = this.$store.state.user.userInfo.phone
	},
	methods: {
		async onSubmit() {
			if (!this.formData.phone) {
				this.showMessage.error("请输入手机号")
				return
			}
			if (this.formData.phone.length !== 11 || this.formData.phone[0] !== "1") {
				this.showMessage.error("请输入正确的手机号")
				return
			}
			if (!this.formData.smsCode) {
				this.showMessage.error("请输入验证码")
				return
			}
			if (!this.formData.pwd) {
				this.showMessage.error("请输入新密码")
				return
			}
			if (this.formData.pwd !== this.password) {
				this.showMessage.error("两次密码不一致")
				return
			}

			try {
				await this.$axios.post("/api/member/member/changePwd", {
					...this.formData,
					pwd: MD5(this.formData.pwd),
				})
				this.showMessage.success("修改成功", true)
			} catch (error) {
				uni.showToast({
					title: error,
					icon: "none",
				})
			}
		},
	},
}
</script>
<style lang="scss" scoped>
.nickname {
	display: flex;
	justify-content: start;
	align-items: center;
	border-bottom: 1px solid #f1f1f1;
	margin: 0 32rpx;

	.text {
		width: 160rpx;
		padding: 35rpx 0;
		font-size: 30rpx;
		margin-right: 60rpx;
		color: #555;
	}
	.send {
		font-size: 24rpx;
		padding: 10rpx;
		border-radius: 10rpx;
		color: #0195ff;
		border: 1px solid #0195ff;
		white-space: nowrap;
	}
}
.button {
	background-color: #0195ff;
	border-radius: 40rpx;
	margin: 100rpx 40rpx;
}
</style>
